<template>
  <div class="goodsList">
    <el-card>
      <!--    头部-->
      <el-form class="headForm">
        <el-form-item label="商品名称">
          <el-input placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品编码">
          <el-input placeholder="请输入商品编码"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-input placeholder="请输入商品分类"></el-input>
        </el-form-item>
        <el-button type="primary" icon="Search">Search</el-button>
      </el-form>
      <!--    表格-->
      <div>
        <div style="margin-bottom: 20px">
          <el-button :bg="true">全部</el-button>
          <el-button>出售中</el-button>
          <el-button>已下架</el-button>
          <el-button>已售完</el-button>
          <el-button type="primary" class="create" @click="createGoods"><span>+</span>创建</el-button>
        </div>
        <el-table
            ref="multipleTableRef"
            :row-style="{height:'30px'}"
            :data="goodsData"
            style="width: 100%;margin-bottom: 20px"
            @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column property="good_id" label="商品ID" width="120"/>
          <el-table-column label="商品图片" width="120">
            <template #default="scope">
              <a :href="scope.row.img" target="_blank">
                <img
                    alt=""
                    :src="scope.row.img"
                    style="width: 60px;height: 60px">
              </a>
            </template>
          </el-table-column>
          <el-table-column property="good_name" label="商品名称"  show-overflow-tooltip width="250"/>
          <el-table-column property="price" label="商品价格" show-overflow-tooltip/>
          <el-table-column property="address" label="总销量" show-overflow-tooltip width="120"/>
          <el-table-column property="address" label="库存总量" show-overflow-tooltip width="120"/>
          <el-table-column property="status" label="状态" show-overflow-tooltip width="120"/>
          <el-table-column property="address" label="排序" show-overflow-tooltip width="120"/>
          <el-table-column  label="添加时间" show-overflow-tooltip >
            <template #default="scope">
              {{moment(scope.row.create_time).format("YYYY-MM-DD HH:MM")}}
            </template>
          </el-table-column>
          <el-table-column label="操作" show-overflow-tooltip>
            <template #default="scope">
              <el-link type="primary" :underline="false" style="margin-right: 10px" @click="EditorGoods(scope)">编辑</el-link>
              <el-link type="primary" :underline="false" @click="deleteGoods(scope)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next"
                       :total="count"
                       :page-size="8"
                       v-model:currentPage="currentPage"
                       @current-change="changePage"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {getGoodsList} from "../../../HTTP/api/goods"
import {deleteGood} from "../../../HTTP/api/goods";
import {onMounted,getCurrentInstance} from "vue";
import {ref} from 'vue'
import {useRouter} from "vue-router";
import moment from "moment";
import {ElMessage, ElMessageBox} from "element-plus";
const {proxy}=getCurrentInstance()
const multipleTableRef = ref()
const multipleSelection = ref([])
//总页数
let count=ref()
//当前页
let currentPage=ref(1)
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
const goodsData = ref()

//获取商品列表
function getGoodsData(page = 1, size = 8) {
  getGoodsList({page, size}).then(res => {
    console.log(res)
    if (res.code === 2000) {
      goodsData.value = res.data.data
      count.value=res.data.count
    }
  })
}
//改变页数
const changePage=(e)=>{
    getGoodsData(e)
}
//创建商品
const createGoods=()=>{
    proxy.$router.push({path:"/admin/goods/create"})
}
//编辑
const EditorGoods=(props)=>{
  proxy.$router.push({path:'/admin/goods/create',query:{goodsId:props.row.good_id}})
}
//删除
const deleteGoods=(scope)=>{
  ElMessageBox.confirm(
      '是否删除该分类?',
      'Warning',
      {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
      }
  ).then(()=>{
      deleteGood({good_id:scope.row.good_id}).then(res=>{
        if(res.code===2000){
          ElMessage({
            type:'success',
            message:'删除商品成功'
          })

        }else {
          ElMessage.error("删除失败")
        }
      })
  })
}
onMounted(() => {
  getGoodsData()
})
</script>

<style scoped>
.goodsList {
  flex: 1;
  margin: 20px;
}

.headForm {
  display: flex;
}

.headForm .el-form-item {
  margin-right: 20px;
}

.el-button {
  margin-left: 0;
  border-radius: 0;
  width: 80px;
}

.create {
  margin-left: 20px;
  width: 100px;
  font-size: 16px;
}

.create span {
  font-size: 25px;
  margin-right: 5px;
}
</style>
